<!DOCTYPE html>
<html lang="en" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/css/custom.form.css">
</head>
<body>
<div class="panel panel-default operation" hidden>
    <div class="panel-heading title"></div>
    <div class="layui-card-body">
        <form class="layui-form " action="" lay-filter="info" style="width: 700px;margin-top: 10px">
            <input name="iD" hidden/>
            <div class="layui-form-item">
                <label class="layui-form-label">行政区划</label>
                <div class="layui-input-block">
                    <input type="xZQH" name="xZQH" placeholder="请输入行政区划" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-block">
                    <input type="nAME" name="nAME" placeholder="请输入姓名" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-block">
                    <input type="sEX" name="sEX" placeholder="请输入性别" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">身份证号</label>
                <div class="layui-input-block">
                    <input type="iDENTITY" name="iDENTITY" placeholder="请输入身份证号" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">出生日期</label>
                <div class="layui-input-block">
                    <input type="bIRTHDAY" name="bIRTHDAY" placeholder="请输入出生日期" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">家庭地址</label>
                <div class="layui-input-block">
                    <input type="aDDRESS" name="aDDRESS" placeholder="请输入家庭地址" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">头像图片</label>
                <div class="layui-input-block">
                    <input type="pHONE" name="pHONE" placeholder="请输入头像图片" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">创建时间</label>
                <div class="layui-input-block">
                    <input type="cREATE4IME" name="cREATE4IME" placeholder="请输入创建时间" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">更新时间</label>
                <div class="layui-input-block">
                    <input type="uPDATE4IME" name="uPDATE4IME" placeholder="请输入更新时间" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">用户编号</label>
                <div class="layui-input-block">
                    <input type="sYS5SER1D" name="sYS5SER1D" placeholder="请输入用户编号" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">所属乡镇</label>
                <div class="layui-input-block">
                    <input type="tOWNSHIP" name="tOWNSHIP" placeholder="请输入所属乡镇" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">针次</label>
                <div class="layui-input-block">
                    <input type="sTITCHES" name="sTITCHES" placeholder="请输入针次" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">${column.comments}</label>
                <div class="layui-input-block">
                    <input type="dELETED" name="dELETED" placeholder="请输入${column.comments}" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="submit" class="layui-btn" lay-submit="" lay-filter="submit">保存</button>
                    <button  class="layui-btn layui-btn-primary" id="btn_cancel">返回</button>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="table_div">
    <div id="searchParam"   >
        <div class="layui-form-item">
            <label class="layui-form-label">姓名：</label>
            <div class="layui-input-inline">
                <input type="text" id="name" class="layui-input"  autocomplete="off" placeholder="请输入姓名">
            </div>
            <label class="layui-form-label">身份证号：</label>
            <div class="layui-input-inline">
                <input type="text" id="identity" class="layui-input"  autocomplete="off" placeholder="请输入身份证号">
            </div>
            <label class="layui-form-label">所属辖区：</label>
            <div class="layui-input-inline">
                <input type="text" id="xzq" class="layui-input"  autocomplete="off" placeholder="请输入所属辖区">
            </div>
            <label class="layui-form-label">接种日期：</label>
            <div class="layui-input-inline">
                <input type="text" id="createTime" class="layui-input"  autocomplete="off" placeholder="接种日期">
            </div>

            <div class="layui-input-inline ">
                <button class="layui-btn" onclick="search()"  id="search">查询</button>
                <button class="layui-btn"   id="export">导出全部</button>
            </div>
        </div>

    </div>
    <table class="layui-table" id="showTable" lay-filter="showTable" ></table>
</div>
<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
<!--        <button class="layui-btn layui-btn-sm" lay-event="add"  shiro:hasPermission="vaccination:add">添加</button>-->
<!--        <button class="layui-btn layui-btn-sm" lay-event="batchDeleted" shiro:hasPermission="vaccination:delete">删除</button>-->
    </div>
</script>
<script type="text/html" id="tool">
    <a class="layui-btn layui-btn-xs" lay-event="edit" shiro:hasPermission="vaccination:update">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" shiro:hasPermission="vaccination:delete">删除</a>
</script>

</body>
</html>
<script src="/layui/layui.all.js"></script>
<script src="/js/core.util.js"></script>
<script>
    //获取token
    var token = CoreUtil.getData("access_token");
    //地址栏转义token中的#号
    var tokenQuery = token.replace("#", "%23");
    var tableIns1;
    var table = layui.table;
    var form = layui.form;
    var layer = layui.layer;
    var $ = jQuery = layui.jquery;
    var laydate = layui.laydate;
    var startTime = null;
    var endTime = null;

    layui.use(['table', 'layer', 'laydate'], function () {

        //加载table
        tableIns1 = table.render({
            elem: '#showTable'
            , contentType: 'application/json'
            , headers: {"authorization": token}
            , page: true //开启分页
            , url: '/vaccination/listByPage' //数据接口
            , method: 'POST'
            , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                // layer.msg(JSON.stringify(res.data.records));
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": CoreUtil.isEmpty(res.data) ? 0 : res.data.total, //解析数据长度
                    "data": CoreUtil.isEmpty(res.data) ? null : res.data.records //解析数据列表
                }
            }
            , cols: [
                [
                    {type: 'checkbox', fixed: 'left'},
                    {field: 'id', title: '编号', sort: true},
                    {field: 'xzq', title: '行政区划', sort: true},
                    {field: 'name', title: '姓名', sort: true},
                    {
                        field: 'sex', title: '性别', width: 100, templet: function (item) {
                            if (item.sex == 1) {
                                return "男";
                            }
                            if (item.sex == 2) {
                                return "女";
                            }
                            else{
                                return "未知";
                            }
                        }
                    },
                    {field: 'identity', title: '身份证号', sort: true},
                    // {field: 'birthday', title: '出生日期', sort: true},
                    {
                        field: 'birthday', title: '出生日期', width: 100, sort: true,
                        templet : "<div>{{layui.util.toDateString(d.birthday, 'yyyy-MM-dd')}}</div>"
                    },
                    {field: 'address', title: '家庭地址', sort: true},
                    {field: 'createTime', title: '登记时间', sort: true},
                    {field: 'xzc', title: '所属乡镇', sort: true},
                    {
                        field: 'stitches', title: '针次', width: 100, templet: function (item) {
                            if (item.stitches == '01') {
                                return "第一针";
                            }
                            if (item.stitches == '02') {
                                return "第二针";
                            }
                            if (item.stitches == '03') {
                                return "第三针";
                            }
                            else{
                               return ""
                                }
                        }
                    }
                    // {width: 120, toolbar: "#tool", title: '操作'}
                ]
            ]
            , toolbar: '#toolbar'
        });


        laydate.render({
            elem: '#createTime'
            ,format:'yyyy-MM-dd'
            , range: '~'
            , done: function (value, date, endDate) {
                if (value != null && value != undefined && value != "") {
                    startTime = value.split("~")[0];
                    endTime = value.split("~")[1];
                } else {
                    startTime = null;
                    endTime = null;
                }

            }
        });
        //表头工具
        table.on('toolbar(showTable)', function(obj){
            switch(obj.event){
                case 'batchDeleted':
                    var checkStatus = table.checkStatus(obj.config.id);
                    var data = checkStatus.data;
                    if(data.length==0){
                        layer.msg("请选择要批量删除的列");
                    }else {
                        var ids = [];
                        $(data).each(function (index,item) {
                            ids.push(item.id);
                        });
                        tipDialog(ids);
                    }
                    break;
                case 'add':
                    $(".table_div").hide();
                    $(".operation").show();
                    $(".title").html("新增");
                    $(".operation input[name=iD]").val("");
                    $(".operation input[name=xZQH]").val("");
                    $(".operation input[name=nAME]").val("");
                    $(".operation input[name=sEX]").val("");
                    $(".operation input[name=iDENTITY]").val("");
                    $(".operation input[name=bIRTHDAY]").val("");
                    $(".operation input[name=aDDRESS]").val("");
                    $(".operation input[name=pHONE]").val("");
                    $(".operation input[name=cREATE4IME]").val("");
                    $(".operation input[name=uPDATE4IME]").val("");
                    $(".operation input[name=sYS5SER1D]").val("");
                    $(".operation input[name=tOWNSHIP]").val("");
                    $(".operation input[name=sTITCHES]").val("");
                    $(".operation input[name=dELETED]").val("");
                    break;
            };
        });
        //列操作
        table.on('tool(showTable)',function (obj) {
            var data = obj.data;
            switch (obj.event) {
                case 'del':
                    var ids=[];
                    ids.push(data.id);
                    tipDialog(ids);
                    break;
                case 'edit':
                    $(".table_div").hide();
                    $(".operation").show();
                    $(".title").html("编辑");
                    $(".operation input[name=iD]").val(data.iD);
                    $(".operation input[name=xZQH]").val(data.xZQH);
                    $(".operation input[name=nAME]").val(data.nAME);
                    $(".operation input[name=sEX]").val(data.sEX);
                    $(".operation input[name=iDENTITY]").val(data.iDENTITY);
                    $(".operation input[name=bIRTHDAY]").val(data.bIRTHDAY);
                    $(".operation input[name=aDDRESS]").val(data.aDDRESS);
                    $(".operation input[name=pHONE]").val(data.pHONE);
                    $(".operation input[name=cREATE4IME]").val(data.cREATE4IME);
                    $(".operation input[name=uPDATE4IME]").val(data.uPDATE4IME);
                    $(".operation input[name=sYS5SER1D]").val(data.sYS5SER1D);
        $(".operation input[name=tOWNSHIP]").val(data.tOWNSHIP);
        $(".operation input[name=sTITCHES]").val(data.sTITCHES);
        $(".operation input[name=dELETED]").val(data.dELETED);
        break;
    }
    });

    //导出
    $('#export').on('click', function () {
        //原先分页limit
        var exportParams = {
            limit: 10000,
            key: $("#key").val()
        };
        CoreUtil.sendPost("/vaccination/listByPage", exportParams, function (res) {
            //初始化渲染数据
            if (res.data != null && res.data.records != null) {
                table.exportFile(tableIns1.config.id, res.data.records, 'xls');
            }
        });
    });

    //删除
    var tipDialog=function (ids) {
        layer.open({
            content: "确定要删除么?",
            yes: function(index, layero){
                layer.close(index); //如果设定了yes回调，需进行手工关闭
                CoreUtil.sendDelete("/vaccination/delete",ids,function (res) {
                    layer.msg(res.msg, {time:1000},function () {
                        search();
                    });
                });
            }
        });
    };

    //返回
    $("#btn_cancel").click(function() {
        $(".table_div").show();
        $(".operation").hide();
        return false;
    });

    //监听保存
    form.on('submit(submit)', function(data){
        if(data.field.id===undefined || data.field.id===null || data.field.id===""){
            CoreUtil.sendPost("/vaccination/add",data.field,function (res) {
                $(".table_div").show();
                $(".operation").hide();
                search();
            });
        }else {
            CoreUtil.sendPut("/vaccination/update",data.field,function (res) {
                $(".table_div").show();
                $(".operation").hide();
                search();
            });
        }

        return false;
    });
    });

    //执行查询
    function search() {
        //这里以搜索为例
        tableIns1.reload({
            where: { //设定异步数据接口的额外参数，任意设
                name: $("#name").val(),
                identity: $("#identity").val(),
                xzq: $("#xzq").val(),
                startTime: startTime,
                endTime: endTime,
            }
            , page: {
                curr: 1 //重新从第 1 页开始
            }
        });
    };
</script>